<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-18 14:30:35
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 15:16:57
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="header">
      <view class="search">
        <!-- 搜索框  -->
        <view class="search_bar">
          <input placeholder="请输入法律法规关键词"
                 v-model="searchObject.title" />
          <view @click="btn_search()"
                class="cuIcon-search btn_search" />
        </view>
      </view>
    </view>
    <scroll-view-y @refresh="refresh()"
                   @getMore="getMore()"
                   :pageNo="searchObject.pageNo"
                   :pageSize="searchObject.pageSize"
                   :total="total"
                   v-if="list.length > 0"
                   :style="listContainerHeight"
                   class="main">
      <template slot="scrollView_content">
        <view class="card"
              v-for="(item, index) in list"
              :key="index"
              @click="changeBox(item)">
          <!-- 被触发单位名称 -->
          <view class="title">{{ item.title }}</view>
          <!-- 所属管辖单位名称 -->
          <view class="subTitle">{{ item.pushDate | calcTime }}</view>
        </view>
      </template>
    </scroll-view-y>
    <no-data v-else
             text="暂无法律法规"></no-data>
  </view>
</template>
<script>
import scrollViewY from "@/components/scrollViewY";
import {
  baseApiUrl
} from "config.js";
import {
  calcTime
} from '@/utils/calcTime'
export default {
  components: {
    scrollViewY
  },
  data () {
    return {
      // 导航栏参数
      navOptions: {
        center: {
          title: "法律法规",
        },
        left: {
          icon: "back",
        },
      },
      searchObject: {
        // 搜索条件
        title: "", // 关键词搜索
        pageNo: 1,
        pageSize: 15,
        dictCode: 2,
        system: 'app'
      },
      total: 0,
      btnBox: {
        status: false,
        box: "-1",
      },
      list: [],
      dataStatus: "刷新", // 用于解决闪烁问题
      loading: false,
    };
  },
  filters: {
    calcTime (time) {
      return calcTime(time);
    }
  },
  provide () {
    return {
      getData: this.getContentBox,
    };
  },
  computed: {
    // 高度 =  100vh - 导航栏高度 - 状态栏高度
    listContainerHeight () {
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      return "height: calc(100vh -" + actionBarHeight + "px);";
    },
  },
  created () {
    this.getContentBox();
  },
  methods: {
    changeBox (item) {
      console.log(item)
      uni.navigateTo({
        url: "../form?title=法律法规详情&id=" + item.contentId
      });
    },
    // 搜索
    btn_search () {
      this.getContentBox();
    },
    getContentBox () {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store
          .dispatch("getContentManageList", this.searchObject)
          .then(({
            data
          }) => {
            this.total = data?.total;
            this.dataStatus === "刷新" ?
              (this.list = data.items) :
              this.list.push(...data.items);
            resolve(data);
          })
          .catch(err => {
            uni.showToast({
              title: err.msg,
              icon: "none",
              mask: false,
              duration: 1500
            });
          })
          .finally(() => {
            let timer = setTimeout(() => {
              this.loading = false
              uni.hideLoading();
              clearTimeout(timer)
            }, 3000);
          })
      });
    },
    // 刷新数据
    refresh () {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 上拉加载
    getMore () {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style.scss";
</style>
